<template>
  <div class="wrap">
    <div class="content_wrap">
      <h1>{{ plateinfo.title }}</h1>
      <h3>{{ plateinfo.date }}</h3>
      <h3>{{ plateinfo.section }}</h3>
      <img class="posterimg" :src="plateinfo.image" alt="" srcset="" />
      <iframe
        style="border: none"
        frameBorder="0"
        scrolling="0"
        id="bdIframe"
        :srcdoc="plateinfo.content"
        width="100%"
        :height="height"
        contenteditable="false"
      />
    </div>
  </div>
</template>

<script>
import emitter from "../utils/eventbus";
import { getContent } from "../http/api";
export default {
  data() {
    return {
      content: "",
      height: 0,
      plateinfo: {},
    };
  },
  metaInfo() {
    return {
      title: this.plateinfo.title,
      meta: [
        {
          vmid: "description",
          name: "description",
          content: this.plateinfo.title,
        },
      ],
    };
  },
  mounted() {
    this.getDetail();
  },
  destroyed() {
    emitter.off("refleshDetail");
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    getDetail() {
      getContent({ id: this.$route.query.id }).then((res) => {
        console.log(res);
        this.plateinfo = res.data.data;
        const oIframe = document.getElementById("bdIframe");
        oIframe.onload = function () {
          this.height = this.contentWindow.document.body.scrollHeight + 200;
        };
        this.content = res.data.content;
        // emitter.on("refleshDetail", (res) => {
        //   this.content = res.content;
        //   window.scroll(0, 0);
        // });
        // if (window.history && window.history.pushState) {
        //   // 向历史记录中插入了当前页
        //   history.pushState(null, null, document.URL);
        //   window.addEventListener("popstate", this.goBack, false);
        // }
      });
    },
    goBack() {
      // console.log("点击了浏览器的返回按钮");
      sessionStorage.clear();
      window.history.back();
      history.pushState(null, null, document.URL);
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  .content_wrap {
    margin-top: 20px;
  }
}
.posterimg {
  width: 300px;
  text-align: center;
  align-items: center;
  justify-items: center;
}
</style>